<style lang="less">
@import "./home.less";
@import "../../styles/common.less";
</style>

<template>
  <div>
    <div class="home">
      <Row :gutter="10">
        <Col :lg="24" :xl="8">
          <Row :gutter="10">
            <Col :lg="12" :xl="24" :style="{marginBottom: '10px'}">
              <Card>
                <Row type="flex" class="user-info">
                  <Col span="8">
                    <Row class-name="made-child-con-middle" type="flex" align="middle">
                      <img class="avator-img" :src="avatarPath" />
                    </Row>
                  </Col>
                  <Col span="16" style="padding-left:6px;">
                    <Row class-name="made-child-con-middle" type="flex" align="middle">
                      <div>
                        <b class="card-user-info-name">{{ username }}</b>
                        <p>您好，autoPower一体化管理平台欢迎您的使用</p>
                      </div>
                    </Row>
                  </Col>
                </Row>
                <div class="line-gray"></div>
                <Row class="margin-top-8">
                  <Col span="8">
                    <p class="notwrap">亲爱的乡亲您来自于：</p>
                  </Col>
                  <Col span="16" class="padding-left-8">{{city}}</Col>
                </Row>
              </Card>
            </Col>
            <Col :lg="12" :xl="24" style="margin-bottom: 10px;">
              <Card>
                <p slot="title">
                  <Icon type="logo-github" size="20" style="margin-right:5px" />
                  AutoPower2.0资源下载
                </p>
                <p slot="extra" style="color: #2d8cf0">收集者：小兵张嘎</p>
                <div style="height: 268px;">
                  <Timeline>
                    <TimelineItem>
                      <!-- <Icon type="logo-youtube" color="#fb7299" slot="dot"></Icon>
                      <a @click="showVideo=true">作者亲自制作XBoot文字快闪宣传片 点我观看</a> -->
                    </TimelineItem>
                    <TimelineItem>
                      <!-- <Icon type="logo-youtube" color="#fb7299" slot="dot"></Icon>
                      <a
                        href="https://www.bilibili.com/video/av23121122/"
                        target="_blank"
                      >作者亲自制作各项目宣传视频 点我观看</a> -->
                    </TimelineItem>
                    <TimelineItem>
                      <!-- <Icon type="md-barcode" color="black" slot="dot"></Icon>
                      <a href="https://github.com/Exrick/Machine-Learning" target="_blank">个人机器学习笔记</a> -->
                    </TimelineItem>
                    <TimelineItem>
                      <!-- <Icon type="md-cart" color="#f4364c" slot="dot"></Icon>
                      <a href="http://xmall.exrick.cn" target="_blank">XMall开源分布式商城</a> -->
                    </TimelineItem>
                    <TimelineItem>
                      <!-- <Icon type="md-cash" color="#19be6b" slot="dot"></Icon>
                      <a href="http://xpay.exrick.cn" target="_blank">XPay开源个人免签支付系统</a> -->
                    </TimelineItem>
                    <TimelineItem>
                      <!-- <Icon type="md-people" color="#57a3f3" slot="dot"></Icon>QQ交流群 475743731(付费) 562962309(免费) -->
                    </TimelineItem>
                  </Timeline>
                </div>
              </Card>
            </Col>
          </Row>
        </Col>
        <Col :lg="24" :xl="16">
          <Row>
            <Col :lg="24" :xl="24" style="padding: 0 5px 10px 0;">
              <Card>
                <p slot="title" style="overflow:visible">
                  工程项目统计图表
                </p>
              </Card>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { getStore } from '@/libs/storage';
export default {
  name: "home",
  components: {
    
  },
  data() {
    return {
      count: {
        createUser: 496,
        visit: 3264,
        collection: 24389305,
        transfer: 39503498
      },
      city: "",
      username: ""
    };
  },
  computed: {
    currNav() {
      return this.$store.state.app.currNav;
    },
    avatarPath() {
      return localStorage.avatorImgPath;
    }
  },
  methods: {
    init() {
      const userInfo = JSON.parse(getStore('userInfo'));
      this.username = userInfo.real_name;
      this.city = userInfo.compamy + userInfo.organization.organization_name;
    },
  },
  mounted() {
    this.init();
  }
};
</script>
